<template>
    <div class="chat-container">
      <h2>Emoji</h2>
      <p>Welcome to chat</p>
      <!-- 表情按钮 -->
      <button @click="toggleEmojiPicker" class="emoji-button">😀</button>
      <!-- 表情选择框，使用 v-if 指令根据 showEmojiPicker 的值来决定是否显示 -->
      <EmojiPage v-if="showEmojiPicker" @close="showEmojiPicker = false" />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import EmojiPage from '@/views/emoji/Emoji.vue';
  
  // 初始化 showEmojiPicker 为 false，表示一开始不显示表情选择框
  const showEmojiPicker = ref(false);
  
  // 切换表情选择框的显示状态
  const toggleEmojiPicker = () => {
    showEmojiPicker.value = !showEmojiPicker.value;
  };
  </script>
  
  <style scoped>
  .chat-container {
    position: relative; /* 为子元素的绝对定位提供参考 */
    min-height: 100vh; /* 确保容器至少占据整个视口高度 */
  }
  
  .emoji-button {
    position: absolute; /* 绝对定位 */
    bottom: 350px; /* 距离容器底部的距离，可以根据需要调整 */
    left: 20px; /* 距离容器左侧的距离，可以根据需要调整 */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  </style>